<template>
  <div class="solarTerms">
    <lb-layout
      v-loading="$store.getters.loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="#a19f9fb0;"
    >
      <div>
        <aps-form
          :config="apsForm.formConfig"
          :model="apsForm.formData"
          :formRef="apsForm.formRef"
          :labelWidth="apsForm.labelWidth"
          ref="form"
        ></aps-form>
        <!-- <div class="change-button-area">
        <el-radio-group
          v-model="TabsName"
          @change="handleTabsChange"
          size="small"
        >
          <el-radio-button
            v-for="(item, index) in TabsArr"
            :key="index"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div> -->
        <el-row>
          <el-col :span="24">
            <Title name="额度超支趋势">
              <lineCom :linedata="barometerLineData"></lineCom>
            </Title>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="mt10">
            <Title name="24 节 气 与 能 耗 动 态 分 析 年 报">
              <ex-total
                :data="{
                  config: titleConfig,
                }"
              >
              </ex-total>
              <lb-table
                :column="tableData.column"
                :data="tableData.data"
                max-height="240"
                background
                layout="total, sizes, prev, pager, next, jumper"
              >
              </lb-table>
              <ex-footer
                :data="{
                  config: tailConfig,
                }"
              ></ex-footer
            ></Title>
          </el-col>
        </el-row>
      </div>
    </lb-layout>
    <detail :visible.sync="show" :detailData="detailData"></detail>
  </div>
</template>

<script>
import lineCom from "@/views/statistics/solarTerms/components/lineChart.vue";
import exTotal from "@/views/statistics/solarTerms/components/ex-total.vue";
import exFooter from "@/views/statistics/solarTerms/components/ex-footer.vue";
import detail from "@/views/statistics/solarTerms/components/detail.vue";
import {
  getSolartermschartData,
  getSolartermsList,
} from "@/api/exports/solarTerms.js";
export default {
  components: {
    lineCom,
    exTotal,
    exFooter,
    detail,
  },
  dicts: ["energy_type"],
  data() {
    return {
      show: false,
      detailData: {},
      TabsArr: [
        {
          label: "节气",
          value: "0",
        },
        {
          label: "气温",
          value: "1",
        },
      ],
      TabsName: "0",
      apsForm: {
        formRef: "form",
        labelWidth: "auto",
        formData: {},
        formConfig: {
          formAttr: {
            // inline: true,
            // size: "small",
            // "label-position": "right",
            // bsColumn: {
            //   col: 3, // 一行几列
            // },
          },
          formAttr: {
            inline: true,
            size: "small",
          },
          properties: {
            energyType: {
              label: "能耗类型:",
              typeName: "el-select",
              render: (h) => {
                let that = this;
                let arr = [];
                that.dict?.type?.energy_type.some((item) => {
                  arr.push(item);
                });
                // 数据严谨处理,处理后端数据异常情况
                let valNum = that.$refs?.form?.getFieldsValue().energyType;
                let a = [
                  h(
                    "el-select",
                    {
                      attrs: {
                        placeholder: "请选择能耗类型",
                        value: valNum,
                        clearable: true,
                      },
                      props: ["value"],
                      on: {
                        change: (value) => {
                          that.$refs?.form?.setFieldValue("energyType", value);
                          that.$forceUpdate();
                        },
                      },
                    },
                    [
                      arr.map((item) => {
                        let { label, value } = item;
                        return h("el-option", {
                          props: {
                            label,
                            value: parseInt(value),
                            key: value,
                          },
                        });
                      }),
                    ]
                  ),
                ];
                return h("div", a);
              },
            },
            year: {
              label: "统计年份:",
              typeName: "el-date-picker",
              type: "year",
              "value-format": "yyyy",
              placeholder: "请选择统计年份",
              "picker-options": {
                disabledDate(time) {
                  let date = new Date();
                  return time.getFullYear() > date.getFullYear();
                },
              },
            },
          },
          formSoltButton: [
            {
              label: "搜索",
              type: "primary",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-search",
              // style: "margin-left:47px",
              click: this.handlerSearchDetail,
            },
            {
              label: "重置",
              // type: "primary",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-refresh-left",
              click: this.handleReset,
            },
          ],
        },
      },
      titleConfig: [
        {
          label: "部门名称",
          value: "",
          formatMoney: false,
        },
        {
          label: "统计年份",
          value: "",
          formatMoney: false,
        },
      ],
      tailConfig: [
        {
          label: "制表人",
          value: "",
          formatMoney: false,
        },
        {
          label: "审核人",
          value: "",
          formatMoney: false,
        },
      ],
      tableData: {
        column: [
          {
            prop: "solarTermsName",
            label: "节气",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "startDate",
            label: "起始日期",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "endDate",
            label: "截止日期",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "highTemperature",
            label: "最高气温(℃)",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "lowTemperature",
            label: "最低气温(℃)",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "kgce",
            label: "能耗(kgce)",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "",
            label: "同比",
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              let a = scope?.row?.kgce ?? 0;
              let b = scope?.row?.lastYearKgce ?? 0;
              let c;
              if (b == 0) {
                c = 0;
              } else {
                c = (a - b) / b;
                c = c.toFixed(2);
              }
              return <div>{c}</div>;
            },
          },
          {
            prop: "",
            label: "额度超支(kgce/㎡)",
            align: "center",
            showOverflowTooltip: true,
            render: (h, scope) => {
              let a = scope?.row?.kgce ?? 0;
              let b = scope?.row?.lastYearKgce ?? 0;
              let c;
              c = a - b;
              c = c.toFixed(2);
              return <div>{c}</div>;
            },
          },
          {
            prop: "budgetOver",
            label: "预算超支(元)",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            label: "操作",
            width: "140",
            fixed: "right",
            render: (h, scope) => {
              let that = this;
              return (
                <div>
                  {
                    <el-button
                      type="text"
                      size="small"
                      icon="el-icon-view"
                      onClick={() => {
                        that.detailData.year =
                          that.$refs?.form?.getFieldsValue().year ?? null;
                        that.detailData.energyType =
                          that.$refs?.form?.getFieldsValue().energyType ?? null;
                        that.detailData.solarTermsName =
                          scope.row?.solarTermsName ?? null;
                        setTimeout(() => {
                          that.show = true;
                        }, 100);
                      }}
                    >
                      详情
                    </el-button>
                  }
                </div>
              );
            },
          },
        ],
        data: [],
      },
      solarTermsAndEnergy: {}, // 节气能耗图表数据
      temperatureAndEnergy: {}, // 气温能耗图表数据
      barometerLineData: {
        xaxisData: [],
        seriesData: [],
        name: "节气晴雨表",
      },
    };
  },
  created() {},
  mounted() {
    this.defaultSet();
    this.handlerSearchDetail();
  },
  methods: {
    handleTabsChange() {
      this.chartDataDeal();
    },
    defaultSet() {
      let date = new Date();
      this.$refs?.form?.setFieldValue("year", date.getFullYear().toString());
    },
    handlerSearchDetail() {
      let data = {};
      data.year = this.$refs?.form?.getFieldsValue().year ?? null;
      data.energyType = this.$refs?.form?.getFieldsValue().energyType ?? null;
      // console.log(data, "qqcs");
      this.initData(data);
      this.getLinedata(data);
    },
    handleReset() {
      //重置
      this.$refs?.form?.resetFields();
      this.defaultSet();
      this.handlerSearchDetail();
    },
    async initData(data) {
      let that = this;
      let query = {};
      if (data) {
        query = {
          ...data,
        };
      }
      that.$store.commit("app/updateApiCount", "add");
      await getSolartermsList(query)
        .then((res) => {
          that.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          // console.log(res, "list");
          that.tableDataDeal(res?.data ?? []);
        })
        .catch((err) => {
          that.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!200101");
        });
    },
    tableDataDeal(data) {
      this.titleConfig[0].value = this.$store.state.user.deptName; // 表头-部门名称
      this.titleConfig[1].value = this.$refs?.form?.getFieldsValue().year; // 表头-统计日期
      this.tailConfig[0].value = this.$store.state.user.name; // 表尾-制表人
      this.tailConfig[1].value = ""; // 表尾-审核人（暂无）
      let solarTermsArr = [
        "立春",
        "雨水",
        "惊蛰",
        "春分",
        "清明",
        "谷雨",
        "立夏",
        "小满",
        "芒种",
        "夏至",
        "小暑",
        "大暑",
        "立秋",
        "处暑",
        "白露",
        "秋分",
        "寒露",
        "霜降",
        "立冬",
        "小雪",
        "大雪",
        "冬至",
        "小寒",
        "大寒",
      ];
      let result = [];
      if (data.length > 0) {
        data.map((item, index) => {
          solarTermsArr.map((tig, index) => {
            if (item.solarTermsName == solarTermsArr[index]) {
              result[index] = item;
            }
          });
        });
      }
      this.tableData.data = result;
    },
    getLinedata(data) {
      getSolartermschartData(data)
        .then((res) => {
          // console.log(res, "chartdata");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.solarTermsAndEnergy = res?.data?.solarTermsAndEnergy ?? {};
          this.temperatureAndEnergy = res?.data?.temperatureAndEnergy ?? {};
          this.chartDataDeal();
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!200100");
        });
    },
    chartDataDeal() {
      if (this.TabsName == "0") {
        this.barometerLineData.xaxisData =
          this.solarTermsAndEnergy?.xaxisData ?? [];
        this.barometerLineData.seriesData =
          this.solarTermsAndEnergy?.seriesData;
        this.barometerLineData.name = "节气能耗表";
      } else if (this.TabsName == "1") {
        this.barometerLineData.xaxisData =
          this.temperatureAndEnergy?.xaxisData ?? [];
        if (this.barometerLineData.xaxisData.length > 0) {
          let xArr = [];
          this.barometerLineData.xaxisData.map((item) => {
            let tig = Number(item) + 5;
            let pig = item + "至" + tig.toString() + "度";
            xArr.push(pig);
          });
          this.barometerLineData.xaxisData = xArr;
        }
        this.barometerLineData.seriesData =
          this.temperatureAndEnergy?.seriesData;
        this.barometerLineData.name = "气温能耗表";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.solarTerms {
  width: 100%;
  height: auto;
  position: relative;
  .change-button-area {
    position: absolute;
    left: 48%;
    z-index: 99;
  }
}
</style>
